import "./style.css"
import * as BABYLON from 'babylonjs';

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 10, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
    var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 4 }, scene);
    var material = new BABYLON.StandardMaterial("material", scene);
    material.diffuseColor = new BABYLON.Color3(1, 0, 0); // 红色
    sphere.material = material;

    var myBox = BABYLON.MeshBuilder.CreateBox("myBox", { height: 5, width: 2, depth: 2 }, scene);

    var myGround = BABYLON.MeshBuilder.CreateGround("myGround", { width: 6, height: 4, subdivisions: 4 }, scene);
    myGround.position.y = -3;

    var path = [];
    for (var i = 0; i < 1000; i++) {
        var x = Math.sin(i / 10) * i / 2;
        var y = i / 20;
        var z = Math.cos(i / 10) * i / 2;
        path.push(new BABYLON.Vector3(x, y, z));
    }

    var tube = BABYLON.MeshBuilder.CreateTube("tube", { path: path, radius: 0.2, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);
    var tubeMaterial = new BABYLON.StandardMaterial("tubeMaterial", scene);
    tubeMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0); // 红色
    tube.material = tubeMaterial;

    // 创建粒子发射器
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("https://assets.babylonjs.com/particles/flare.png", scene); // 设置粒子纹理图片

// 设置粒子效果属性
particleSystem.emitter = sphere.position; // 粒子发射器位置设置为球体的位置
particleSystem.minEmitPower = 5;
particleSystem.maxEmitPower = 3;
particleSystem.emitRate = 1000;

particleSystem.start();
var animationSphere = new BABYLON.Animation("sphereAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    // 创建关键帧
    var keys = [];
    for (let i = 0; i < path.length; i++) {
        keys.push({
            frame: i * 10,
            value: path[i]
        });
    }

    animationSphere.setKeys(keys);
    sphere.animations = [];
    sphere.animations.push(animationSphere);

    scene.beginDirectAnimation(sphere, [animationSphere], 0, keys.length * 10, true);

    return scene;
};


var scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});

window.addEventListener("resize", function () {
    engine.resize();
});
